<template>
	<view class="deleteUpdate">
		<view>
			<record-form v-model:userItem="userItem"></record-form>

			<view class="msg-box" @click="healthRecord()">
				<text>健康档案</text>
				<!-- <input placeholder="健康档案" v-model="userItem.otherId.phone" /> -->
			</view>
		</view>
		<view class="commitBtn">
			<button @click="show=true">删除家庭成员</button>
			<button @click="accUpdata()">保存</button>
		</view>
	</view>

	<u-modal width="520rpx" :show="show" title="" content="删除后，该家庭成员的信息不可恢复，确定删除吗？" :showCancelButton="false"
		:showConfirmButton="false" @close="show = false" class="text-color">

		<!-- 自定义底部按钮 -->
		<template #confirmButton>
			<view class="modal-footer">
				<text class="btn cancel" @tap="handleCancel">取消</text>
				<view class="divider"></view>
				<text class="btn confirm" @tap="handleConfirm">确认</text>
			</view>
		</template>
	</u-modal>
</template>

<script setup>
	import {
		ref,
		watchEffect
	} from 'vue';
	import {
		deleteMemberApi,
		updateMemberApi
	} from '../../../api/home-member';
	import recordForm from '../../components/record-form/record-form.vue';
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		useUserStore
	} from '../../../store/user';
	import {
		getUserInfoApi
	} from '../../../api/login';
	
	const userStore=useUserStore();
	
	const uid = ref('')
	const ownid = ref('')

	// const store = useUserStore()
	// 修改删除
	const userItem = ref({
		otherId: {}
	})

	function healthRecord() {
		uni.navigateTo({
			url: `/pages/many-health-message/many-health-message?userId=${userItem.value.otherId._id}`
		})
	}



	onLoad((option) => {
		// getUserInfo()
		if (option.item) {
			userItem.value = JSON.parse(option.item)
		}
		console.log('2222222', userItem.value);
	})

	const accUpdata = async () => {
		console.log('777', userItem.value);
		const res = await updateMemberApi({
			...userItem.value.otherId,
			relationship: userItem.value.relationship
		})

		if (res.code == 200) {
			
			if (userItem.value.relationship == "本人") {
				userStore.getUserInfoAction();
			}

			uni.showToast({
				title: '保存成功',
				icon: 'success',
				duration: 3000
			});

			uni.navigateBack({

				delta: 1,
				// url: '/homepackge/pages/familyTeam-manage/familyTeam-manage'
			})

		}
	}

	// 删除家庭成员
	const accDeleteTeam = async () => {


		const res = await deleteMemberApi({
			otherId: userItem.value.otherId._id,
			ownId: userItem.value.ownId
		})
		if (res.code == 200) {
			// getUserInfo()

			uni.showToast({
				title: '删除成功',
				icon: 'success',
				duration: 3000
			});

			userItem.value = {
				otherId: {}
			}


			setTimeout(() => {
				uni.navigateBack({
					delta: 1,
					// url: '/homepackge/pages/familyTeam-manage/familyTeam-manage'
				})
			}, 1000);
		}
	}

	// 获取用户信息id
	const getUserInfo = async () => {

		const res = await getUserInfoApi()
		if (res.code === 200) {

			ownid.value = res.data._id
			// console.log('用户信息',res);
			// console.log(555,ownid.value);

		}
	}

	// 弹窗
	const show = ref(false);

	const handleConfirm = () => {
		// console.log('确认');
		accDeleteTeam()
		show.value = false;

	};
	const handleCancel = () => {
		console.log('取消');
		show.value = false;
	};
</script>

<style scoped lang="scss">
	.modal-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		// padding: 0 40rpx;
		height: 100rpx;
		border-top: 1rpx solid #eee;
		padding: 0;
		background: #fff;
	}

	.btn {
		flex: 1;
		text-align: center;
		font-size: 32rpx;
	}

	.cancel {
		color: #606266;
	}

	.confirm {
		color: #2979ff;
	}

	.divider {
		width: 1rpx;
		height: 100%;
		background-color: #dcdfe6;
	}

	.msg-box {
		height: 88rpx;
		width: 100%;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #eee;
		padding: 0 40rpx;
		margin-top: 20rpx;
		background-color: #fff;

		text {
			margin-right: 50rpx;
			width: 140rpx;
			// font-size: 14px;
			font-weight: 400;
			font-style: normal;
			font-size: 14px;
		}

		input {

			font-size: 14px;
		}
	}

	.commitBtn {
		height: 160rpx;
		border-top: 1px solid #eee;
		display: flex;

		align-items: center;
		padding: 0 40rpx;

		background-color: #fff;

		button {
			width: 300rpx;
			height: 88rpx;
			background-color: #2984f8;
			font-size: 16px;
			color: #fff;
			line-height: 88rpx;
			text-align: center;

		}

		button:first-child {
			background-color: #fff;
			color: #2984f8;
		}

	}

	.deleteUpdate {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		min-height: 100vh;
		background-color: #f0f8ff;
	}
</style>